<template>
  <div class="wrapper">
    <!-- 热门话题 -->
    <div class="topic-card" 
         v-for="(topic, index) in hotTopics" 
         :key="index"
         @click="goToArticle(topic.id)">
      <img :src="topic.image" :alt="topic.title">
      <div class="topic-info">
        <h3>{{ topic.title }}</h3>
        <p>{{ topic.description }}</p>
      </div>
    </div>

    <!-- 视频专栏 -->
    <div class="section video-section">
      <h2 class="section-title">健康视频</h2>
      <div class="video-card" 
           v-for="(video, index) in videos" 
           :key="index"
           @click="playVideo(video.id)">
        <div class="video-thumbnail">
          <img :src="video.thumbnail" :alt="video.title">
          <i class="fa fa-play-circle"></i>
        </div>
        <h3>{{ video.title }}</h3>
        <p>{{ video.views }}播放 · {{ video.duration }}</p>
      </div>
    </div>

    <!-- 健康资讯 -->
    <div class="section news-section">
      <h2 class="section-title">健康资讯</h2>
      <div class="news-card" 
           v-for="(news, index) in healthNews" 
           :key="index"
           @click="goToArticle(news.id)">
        <img :src="news.image" :alt="news.title">
        <div class="news-info">
          <h3>{{ news.title }}</h3>
          <p>{{ news.summary }}</p>
          <div class="news-meta">
            <span>{{ news.date }}</span>
            <span>阅读 {{ news.views }}</span>
          </div>
        </div>
      </div>
    </div>

    <FooterView></FooterView>
    
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import FooterView from '@/components/FooterView.vue'
export default{
setup(){

},
components: {
        FooterView,
    },
}
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  background-color: #F9F9F9;
  padding-bottom: 15vw;
}

/*********************** 头部 ***********************/
header {
  width: 100%;
  height: 15.7vw;
  background-color: #FFF;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.6vw;
}
.logo img {
  width: 9vw;
  height: 9vw;
}
.search-box {
  flex: 1;
  margin: 0 3vw;
  padding: 1.5vw 2vw;
  background-color: #F2F2F2;
  border-radius: 5vw;
  display: flex;
  align-items: center;
}
.search-box input {
  flex: 1;
  margin-left: 2vw;
  font-size: 3.6vw;
  background: none;
  border: none;
}
.search-box input:focus {
  outline: none;
}
.fa-bell-o {
  font-size: 5.6vw;
}

/*********************** 轮播图 ***********************/
.banner {
  margin-top: 15.7vw;
  padding: 3vw;
}
.banner img {
  width: 100%;
  height: 40vw;
  border-radius: 2vw;
}

/*********************** 分类导航 ***********************/
.category-nav {
  padding: 0 3vw 3vw;
  background-color: #FFF;
}
.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #EFEFEF;
}
.category-nav ul li {
  width: 30%;
  padding: 3vw 0;
  text-align: center;
  font-size: 4vw;
  color: #666;
  border-bottom: 2px solid transparent;
}
.category-nav ul li.active {
  color: #127A90;
  border-bottom-color: #127A90;
}

/*********************** 内容区域 ***********************/
.content {
  padding: 3vw;
  background-color: #F9F9F9;
}

/*********************** 模块标题 ***********************/
.section {
  background-color: #FFF;
  border-radius: 2vw;
  padding: 3vw;
  margin-bottom: 3vw;
}
.section-title {
  font-size: 4.8vw;
  font-weight: bold;
  margin-bottom: 3vw;
  padding-bottom: 1vw;
  border-bottom: 1px solid #EFEFEF;
}

/*********************** 热门专题 ***********************/
.hot-topic .topic-card {
  display: flex;
  margin-bottom: 3vw;
}
.hot-topic .topic-card img {
  width: 25vw;
  height: 25vw;
  border-radius: 1vw;
  margin-right: 3vw;
}
.hot-topic .topic-info h3 {
  font-size: 4.5vw;
  margin-bottom: 1.5vw;
}
.hot-topic .topic-info p {
  font-size: 3.5vw;
  color: #666;
}

/*********************** 视频专栏 ***********************/
.video-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
}
.video-card {
  background-color: #FAFAFA;
  border-radius: 1vw;
  padding: 2vw;
}
.video-thumbnail {
  position: relative;
  margin-bottom: 2vw;
}
.video-thumbnail img {
  width: 100%;
  height: 35vw;
  object-fit: cover;
  border-radius: 1vw;
}
.video-thumbnail .fa-play-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10vw;
  color: rgba(0,0,0,0.6);
}
.video-card h3 {
  font-size: 4vw;
  margin-bottom: 1.5vw;
}
.video-card p {
  font-size: 3vw;
  color: #888;
}

/*********************** 健康资讯 ***********************/
.news-section .news-card {
  display: flex;
  margin-bottom: 3vw;
}
.news-card img {
  width: 30vw;
  height: 20vw;
  border-radius: 1vw;
  margin-right: 3vw;
}
.news-info h3 {
  font-size: 4.5vw;
  margin-bottom: 1.5vw;
}
.news-info p {
  font-size: 3.5vw;
  color: #666;
  margin-bottom: 2vw;
}
.news-meta {
  font-size: 3vw;
  color: #999;
}
.news-meta span {
  margin-right: 2vw;
}

/*********************** 返回顶部 ***********************/
.back-top {
  position: fixed;
  right: 3.6vw;
  bottom: 15vw;
  width: 12vw;
  height: 12vw;
  background-color: #127A90;
  border-radius: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10;
}
.back-top .fa-angle-up {
  font-size: 7vw;
  color: #FFF;
}
</style>